<!--
 * @Description: 自定义组件CountAdd
 * @Author: rendc
 * @Date: 2024-11-13 15:18:50
 * @LastEditors: 客
 * @LastEditTime: 2024-11-13 17:07:23
-->
<!-- 页面结构 -->
<template>
  {{ fontSize }}
  <div :style="{ 'font-size': fontSize + 'px' }">
    <!-- num:{{ num }} -->
    count:{{ count }}
    <button @click="count++">count++</button>
    <button @click="childAddFont">fontSize++</button>
    <button @click="fontSize--">fontSize--</button>
  </div>
</template>
<!-- js -->
<script setup>
import { ref } from 'vue';
const count = ref(0);
const fontSize = ref(20);
const props = defineProps(['num']);
count.value = props.num;
function childAddFont () {
  console.log('🤡 CC - childAddFont - childAddFont:');
  fontSize.value++;
}
// 暴露方法给父组件
defineExpose({ childAddFont });
</script>
<!-- 样式 -->
<!-- scoped是为了当前组件的样式不要影响其他组件 -->
<style scoped></style>